<script>
  export default {
    name: 's-pendant-diagram',
    data() {
      return {
        uniqueShiValues: [],
      };
    },
    props: {
      data: null,
    },
    mounted() {
      const shiValues = this.data.map(item => item.shi).filter(shi => shi !== undefined);
      const shiCount = {};
      shiValues.forEach(shi => {
        if (shiCount[shi]) {
          shiCount[shi]++;
        } else {
          shiCount[shi] = 1;
        }
      });

      // 筛选掉相同的 shi 值
      this.uniqueShiValues = [...new Set(shiValues)];
    },
    methods: {
      getShowBottom(index) {
        if (JSON.stringify(this.data[index]) == '{}' || !this.data[index].id) {
          return false;
        }
        if (!!this.data[index + 4] && JSON.stringify(this.data[index + 4]) != '{}' && !!this.data[index+ 4].id) {
          return true;
        }
      },
      getShowTop(index) {
        console.log(this.data[index]);
        if (JSON.stringify(this.data[index]) == '{}' || !this.data[index].id) {
          return false;
        }
        if (!!this.data[index] && JSON.stringify(this.data[index]) != '{}') {
          return !!this.data[index].fq_id;
        }
      },
      getShowLeft(index) {
        if (!this.data[index] || !this.data[index].id || JSON.stringify(this.data[index]) == '{}') {
          let organArr = [];
          this.data.forEach(item => {
            organArr.push(item);
          });
          organArr[index].index = index;
          let arr = this.splitArrayIntoFive(organArr);

          let targetIndex = -1;
          for (let i = 0; i < organArr.length; i++) {
            for (let j = 0; j < arr[i].length; j++) {
              if (arr[i][j].index === organArr[index].index) {
                targetIndex = i;
                break;
              }
            }
            if (targetIndex !== -1) {
              break;
            }
          }
          const count = this.countSameFqId(arr[targetIndex]);

          if (!!Object.values(count)[0]) {
            return index % 4 < Object.values(count)[0][1] && Object.values(count)[0][0] < index % 4;
          }else{
            return false
          }
        }
        let arr = [];
        for (let i = 0; i < this.data.length; i++) {
          if (i < index && JSON.stringify(this.data[i]) != '{}' && this.data[i].fq_id == this.data[index].fq_id) {
            arr.push(this.data[i]);
          }
        }
        return arr.length > 0;
      },
      getShowRight(index) {
        if (!this.data[index] || !this.data[index].id || JSON.stringify(this.data[index]) == '{}') {
          let organArr = [];
          this.data.forEach(item => {
            organArr.push(item);
          });
          organArr[index].index = index;
          let arr = this.splitArrayIntoFive(organArr);

          let targetIndex = -1;
          for (let i = 0; i < organArr.length; i++) {
            for (let j = 0; j < arr[i].length; j++) {
              if (arr[i][j].index === organArr[index].index) {
                targetIndex = i;
                break;
              }
            }
            if (targetIndex !== -1) {
              break;
            }
          }
          const count = this.countSameFqId(arr[targetIndex]);

          if (!!Object.values(count)[0]) {
            return index % 4 < Object.values(count)[0][1] && Object.values(count)[0][0] < index % 4;
          }else{
            return false
          }
        }
        let arr = [];
        for (let i = index + 1; i < this.data.length; i++) {
          if (JSON.stringify(this.data[i]) != '{}' && this.data[i].fq_id == this.data[index].fq_id) {
            arr.push(this.data[i]);
          }
        }
        return arr.length > 0;
      },
      splitArrayIntoFive(arr) {
        const chunkSize = Math.ceil(arr.length / 5);
        const result = [];
        for (let i = 0; i < arr.length; i += chunkSize) {
          result.push(arr.slice(i, i + chunkSize));
        }
        return result;
      },
      countSameFqId(arr) {
        const fqIdPositions = {};
        for (let i = 0; i < arr.length; i++) {
          const item = arr[i];
          if (item.fq_id !== undefined) {
            if (!fqIdPositions[item.fq_id]) {
              fqIdPositions[item.fq_id] = [];
            }
            fqIdPositions[item.fq_id].push(i);
          }
        }

        const result = {};
        for (const fqId in fqIdPositions) {
          if (fqIdPositions[fqId].length > 1) {
            result[fqId] = fqIdPositions[fqId];
          }
        }
        return result;
      },
    },
  };
</script>

<template>
  <view class="grid_flex" style="height: 100%;position:relative;">
    <!--  <view class="flex align-end justify-center" style="writing-mode:vertical-rl;font-size: 38rpx;margin-right: 5rpx;">-->
    <!--    <view class="flex align-center justify-center" style="height: 230rpx;width: 60rpx;position: relative">-->
    <!--      <view style="position: absolute;width: 2rpx;height: 80rpx;background: red;top: -40rpx;left: 50%;transform: translateX(-50%)"></view>-->
    <!--      {{data.surname}}{{data.name}}-->
    <!--    </view>-->
    <!--  </view>-->

    <!--  <view style="width: 100%;height: 2rpx;background: red" v-if="data.children.length > 1"></view>-->
    <!--  <view class="flex">-->
    <!--    <s-pendant-diagram v-for="(item,index) in data.children" :key="index" :data="item" :index="index"></s-pendant-diagram>-->
    <!--  </view>-->
    <view class="flex flex-column align-center justify-around " style="position: absolute;height: 100%;"
          v-if="uniqueShiValues.length >= 5">
      <view class="shidai_list" v-for="(item,index) in uniqueShiValues" :key="index">{{ item }}</view>
    </view>
    <view v-for="(item,index) in data" class="flex align-center justify-center"
          :style="{background:`rgb(${item}0, ${item}0, ${item}0)`}"
          style="color: #ff4206;writing-mode:vertical-rl;font-size: 38rpx;margin-right: 5rpx;position: relative">
      <view v-if="!!item" >{{ item.surname }}{{ item.name }}</view>
      <!-- 向上的竖线 -->
      <view style="width: 2rpx;height: 30rpx;background: #ff4206;position: absolute;top: 0"
            v-if="getShowTop(index)"></view>
      <!-- 向下的竖线 -->
      <view style="width: 2rpx;height: 30rpx;background: #ff4206;position: absolute;bottom: 0"
            v-if="getShowBottom(index)"></view>
      <!-- 向左的横线 -->
      <view style="width: 51%;height: 2rpx;background: #ff4206;position: absolute;left: -2rpx;top: 0"
            v-if="getShowLeft(index)"></view>
      <!-- 向右的横线 -->
      <view style="width: 51%;height: 2rpx;background: #ff4206;position: absolute;right: -2rpx;top: 0"
            v-if="getShowRight(index)"></view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .grid_flex {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
  }

  .shidai_list {
    background: url($uni-bg-url-sq + "/index/genealogy_left_icon.png") no-repeat;
    background-size: 100% 100%;
    padding: 25rpx 2rpx;
    font-size: 25rpx;
    color: #FFFFFF;
    font-weight: 500;
  }
</style>